<template>
    <div class="app-container">
      <projectHeader @tabClick="tabClick"></projectHeader>
        <!-- 搜索 -->
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="auto">
            <el-form-item label="场站名称" prop="StationName">
                <el-input
                    v-model="queryParams.StationName"
                    placeholder="请输入场站名称"
                    clearable
                    style="width: 240px"
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
           <!-- <el-form-item label="位置">
              <el-cascader v-model="location"
							:options="locationOptions"
							:props="{value: 'id', label: 'name'}"
							@change="handleQueryLocationChange"
							:clearable="true"/>
            </el-form-item> -->
            <el-form-item label="类型" prop="stationType">
                <el-select v-model="queryParams.stationType" style="width: 200px;" placeholder="请选择">
									<el-option
										v-for="item in dict.typecharg_station_type"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 操作 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="Plus"
                    @click="handleAdd"
                    v-hasPermi="['system:eaStation:add']"
                >
                    创建场站
                </el-button>
            </el-col>
        </el-row>

        <!-- 列表 -->
       <template v-if="list.length > 0">
          <el-row :gutter="10" v-loading="loading" style="min-height: 200px;">
                <el-col :span="12" v-for="(row, index) in list" :key="index">
                    <el-card class="box-card" style="margin-bottom: 10px;">
                        <div slot="header" style="display: flex; flex-direction: column;">
                            <h3 v-text="row.stationName" style="margin: 10px 0 5px;"></h3>
                            <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 10px 0;">
                                <div>
                                    <template v-for="item in row.taglist" >
                                        <el-tag type="warning" style="margin-right: 5px;">{{item.label || item.id}}</el-tag>
                                    </template>
                                </div>
                                <div style="padding: 3px 0; display: flex; flex-direction: row;">
                                    <div>
                                        <el-tag v-if="row.status == 1" type="success">启用</el-tag>
                                        <el-tag v-else-if="row.status == 0" type="danger">禁用</el-tag>
                                    </div>

                                    <!-- <div style="margin-left: 10px;">
                                        <el-tag v-if="row.isOpen == 1" type="success">开放</el-tag>
                                        <el-tag v-else type="danger">未开放</el-tag>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <div class="body" style="padding: 15px 0; border-top: 1px dashed #e6e7ec; border-bottom: 1px dashed #e6e7ec;">
                            <el-row :gutter="30" style="width: 100%;">
                                <el-col :span="12"><PieChart title="直流" :stat="{'piles': row['dcPileCount'], 'ports': row['dcPortCount']}" :data="row.dc" /></el-col>
                                <el-col :span="12"><PieChart title="交流" :stat="{'piles': row['acPileCount'], 'ports': row['acPortCount']}" :data="row.ac" /></el-col>
                            </el-row>
                        </div>
                        <div class="btns" style="margin-top: 15px;">
                            <!-- <el-button type="primary" plain @click="handleShowDeviceMonitor(row)" v-hasPermi="['station:station:show_device_monitor']">设备监控</el-button> -->
                            <el-button type="primary" plain @click="handleUpdate(row)" v-hasPermi="['system:eaStation:edit']">编辑电站</el-button>
                            <el-button type="primary" plain @click="handleShowOrderList(1, row)" v-hasPermi="['system:eaOrder:list']">查看订单</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
       </template>
        <template v-else>
          <!-- <el-card> -->
              <el-empty description="没有数据" />
          <!-- </el-card> -->
        </template>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 设备监控 -->
        <el-dialog title="设备监控" v-model="device_monitor_open" width="1200px" append-to-body class="device_monitor">
            <div v-loading="device_monitor_loading">
                <el-row :gutter="10">
                    <el-col :span="6" v-for="device in device_list" :key="device.id">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>{{device.pilecharging_tname}}</span>
                                </div>
                            </template>
                            <el-row :gutter="20">
                                <el-col :span="12" v-for="(conn, index2) in device.charging_connectorinfos" :key="conn.id">
                                    <div style="display: flex; justify-content: space-between">
                                        <span>P{{index2 + 1}}</span>
                                        <span><el-button type="primary" link @click="handleShowOrderList(2, conn)">查看订单</el-button></span>
                                    </div>
                                    <div style="margin-top: 15px;">{{ conn.run_status ? '在线' : '离线' }}</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>

        <!-- 编辑电站 -->
        <el-dialog :title="title" :visible.sync="open" width="900px">
            <el-form ref="formRef" :model="form" :rules="rules" v-loading="edit_form_loading" label-width="160">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基本信息" name="first">
                      <el-form-item label="滚动图片" prop="pictures">
                        <imageUpload v-model="form.pictures" ></imageUpload>
                      </el-form-item>
                      <el-form-item label="电站名称" prop="stationName">
                          <el-input v-model="form.stationName" placeholder="请输入电站名称"/>
                      </el-form-item>
                      <!-- v-if="!userInfo.operatorId" prop="operatorId" -->
                      <el-form-item label="运营商"  style="width: 100%;" >
                        <el-select
                            v-model="form.operatorId"
                            placeholder="请选择运营商"
                            clearable
                            style="width: 240px"
                            :disabled="form.id ? true : false"
                        >
                          <el-option
                              v-for="item in operatorList"
                              :key="item.id"
                              :label="item.label"
                              :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="充电桩标签" prop="tagIds" class="w100">
                          <el-select
                              v-model="form.tagIds"
                              multiple
                              clearable
                              placeholder="请选择"
                              style="width: 100%"
                          >
                              <el-option
                                  v-for="item in tagOptions"
                                  :key="item.id"
                                  :label="item.label"
                                  :value="item.id"
                              />
                          </el-select>
                      </el-form-item>
                      <el-form-item label="是否推送室内" prop="isIndoor">
                        <el-radio-group v-model="form.isIndoor">
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="是否合并路测支付" prop="isMergeOutdoorPayment">
                        <el-radio-group v-model="form.isMergeOutdoorPayment">
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="合并路测支付项目" v-if="form.isMergeOutdoorPayment == 1"
                      prop="mergeOutdoorPaymentProjectIds">
                      	<el-select v-model="form.mergeOutdoorPaymentProjectIds"
                        style="width: 200px;" multiple placeholder="请选择合并路测支付项目">
                          <el-option
                            v-for="item in roadsideList"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id"
                          ></el-option>
                      	</el-select>
                      </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="位置设置">
											<el-form-item label="省份" prop="provinceCode">
												<el-select v-model="form.provinceCode" @change="proviceChange" style="width: 200px;" placeholder="请选择">
														<el-option
																v-for="item in proviceList"
																:key="item.areaCode"
																:label="item.name"
																:value="item.areaCode"
														></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="市"  prop="cityCode">
												<el-select v-model="form.cityCode" @change="cityChange" style="width: 200px;" placeholder="请选择">
														<el-option
																v-for="item in cityList"
																:key="item.areaCode"
																:label="item.name"
																:value="item.areaCode"
														></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="区" prop="countyCode">
												<el-select v-model="form.countyCode" style="width: 200px;" placeholder="请选择">
														<el-option
																v-for="item in countyList"
																:key="item.areaCode"
																:label="item.name"
																:value="item.areaCode"
														></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="详细地址" class="w100">
													<el-input v-model="form.address" placeholder="请输入详细地址"/>
											</el-form-item>
											<el-form-item label="经度">
												<div class="flex_hcneter">
                          <el-col :span="9">
                          	<el-input v-model="form.longitude" placeholder="请输入经度"/>
                          </el-col>
                          <el-col :span="2" class="text-center">
                          	<span class="text-gray-500">纬度</span>
                          </el-col>
                          <el-col :span="9">
                          	<el-input v-model="form.latitude" placeholder="请输入纬度"/>
                          </el-col>
                          <el-col :span="4" class="text-center">
                          	<el-button type="primary" @click="amapSelect">获取位置</el-button>
                          </el-col>
                        </div>
											</el-form-item>
											<el-form-item label="充电站电话">
													<el-input v-model="form.stationPhone" placeholder="请输入充电站电话"/>
											</el-form-item>
											<el-form-item label="营业时间描述">
													<el-time-picker
															v-model="form.busineHours"
															@change="onBusineHoursChange"
															is-range
															arrow-control
															format="HH:mm:ss"
															value-format="HH:mm:ss"
															start-placeholder="开始时间"
															end-placeholder="结束时间"
													/>
											</el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="费率设置">
                        <el-form-item label="收费规则" v-if="form.platformType == 2" prop="bikeFeeRuleId">
                            <el-select v-model="form.bikeFeeRuleId" style="width: 200px;" placeholder="请选择">
                                <el-option
                                    v-for="item in ruleList"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="parseInt(item.id)"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <div v-if="form.platformType == 1">
                          <el-form-item label="直流计费规则">
                              <el-select v-model="form.carDcFeeRuleId" style="width: 200px;" placeholder="请选择">
                                  <el-option
                                      v-for="item in ruleList"
                                      :key="item.id"
                                      :label="item.label"
                                      :value="parseInt(item.id)"
                                  ></el-option>
                              </el-select>
                          </el-form-item>
                          <el-form-item label="交流计费规则">
                              <el-select v-model="form.carAcFeeRuleId" style="width: 200px;" placeholder="请选择">
                                  <el-option
                                      v-for="item in ruleList"
                                      :key="item.id"
                                      :label="item.label"
                                      :value="parseInt(item.id)"
                                  ></el-option>
                              </el-select>
                          </el-form-item>
                        </div>
												<el-form-item label="停车费说明">
                            <el-input v-model="form.parkingText" placeholder="请输入停车费说明"/>
                            <span>如：免费停车，或充电结束两小时内免费</span>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="其他参数">
                        <el-form-item label="站类型">
                            <el-select v-model="form.stationType" style="width: 200px;" placeholder="请选择">
                                <el-option
                                    v-for="item in dict.type.charg_station_type"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="parseInt(item.value)"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-radio-group v-model="form.status">
                                <el-radio :label="0">禁用</el-radio>
                                <el-radio :label="1">启用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="建设场地">
                            <el-select v-model="form.construction" style="width: 200px;" placeholder="请选择">
                                <el-option
                                    v-for="item in dict.type.charg_const_site"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="parseInt(item.value)"
                                />
                            </el-select>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 显示地图 拾取坐标 -->
        <el-dialog :visible.sync="open_map"  width="900px" style="height: 750px;" append-to-body>
            <iframe id="mapPage" width="100%" height="600" frameborder=0
                    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=AQ4BZ-TBAWR-WJ4WS-WSS25-Z2RIQ-IYFJX&referer=myapp">
            </iframe>
            <div style="margin: 10px 0;">当前选中坐标为：{{clickLatLng}}</div>
            <div style="width: 100%; text-align: center;">
                <el-button type="primary" @click="handlePickLocation">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 订单 -->
        <el-dialog title="信息" :visible.sync="order_dialog_visible" class="order-list" width="90%" append-to-body>
            <OrderList ref="OrderList" :stationId="order_by_gun_id" />
        </el-dialog>

				<!-- 地图弹窗 -->
				<mapLog ref="mapLogs" @mapSubmit="mapSubmit" :formObj="form" isDetail :formType="{
				  'longitude':'longitude',
				  'latitude':'latitude',
					'details':'address',
				}"></mapLog>
		</div>
</template>

<script>
import * as api from "@/api/station/station";
import { eaCarTagList } from "@/api/station/tag";
import PieChart from "@/components/Chart/Pie";
import mapLog from "@/components/mapLog/index";
import {array2tree, formatTimestamp, locationArray2Object, locationObject2Array} from "@/utils/ruoyi";
import { listRule} from "@/api/station/billing_rules";
import OrderList from "@/components/Common/order/OrderList.vue";
import { eaFeeRuleAllSelect} from "@/api/station/eaFeeRule";
import { eaOperatSelect } from "@/api/station/operator";
import { eaOutdoorProjectAllSelect } from "@/api/roadside/roadside";
export default {
  name: 'Station',
  dicts: ['charg_supply_type','charg_const_site','charg_station_type','rule_platform_type'],
  components: { mapLog,PieChart,OrderList },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      list:[],
      loading:true,
      showSearch:false,
      total:0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      form: {},
      rules: {
        pictures: [{required: true, message: "滚动图片不能为空", trigger: "blur"}],
        operatorId: [{required: true, message: "请选择所属运营商", trigger: "change"}],
        stationName: [{required: true, message: "电站名称不能为空", trigger: "blur"}],
        tagIds: [{required: true, message: "请选择充电桩标签", trigger: "change"}],
        stationName: [{required: true, message: "充电站国家代码不能为空", trigger: "blur"}],
        areaCode: [{required: true, message: "充电站省市辖区编码不能为空", trigger: "blur"}],
        provinceCode: [{required: true, message: "请选择充省份", trigger: "change"}],
        cityCode: [{required: true, message: "请选择充市", trigger: "change"}],
        countyCode: [{required: true, message: "请选择区", trigger: "change"}],
        isIndoor: [{required: true, message: "请选择是否推送室内", trigger: "change"}],
        isMergeOutdoorPayment: [{required: true, message: "请选择是否合并路测支付", trigger: "change"}],
        mergeOutdoorPaymentProjectIds: [{required: true, message: "请选择合并路测支付项目", trigger: "change"}],
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      edit_form_loading:false,
      dateRange:[],
      proviceList:[],
      cityList:[],
      countyList:[],
      charts:[],
      location:[],
      locationOptions:[],
      device_monitor_open:false,
      device_monitor_loading:false,
      device_list:[],
      activeName:'first',
      operatorOptions:[],
      tagOptions:[],
      open_map:false,
      order_dialog_visible:false,
      order_by_stationname:'',
      order_by_gun_id:0,
      billingRuleOptions:[],
      busineHours:[],
      clickLatLng:'',
      ruleList:[],//收费规则
      plateform:{},//选择的平台项目
      operatorList:[],//运营商数据
      userInfo:{},//用户信息
      roadsideList:[],
    };
  },
  async mounted(){
    // this.getAllOperator();
    let user = this.$store.state.user || {}
    this.userInfo = user.userInfo || {}
    console.log('this.userInfo',this.userInfo)
    await this.getAllTag();
    window.addEventListener('message', (event)=> {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data;
      if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          console.log('location', loc);

          this.form['StationLat'] = loc.latlng.lat;
          this.form['StationLng'] = loc.latlng.lng;
          this.clickLatLng = loc.latlng.lat + ',' + loc.latlng.lng;
      }
    }, false);
  },
  methods: {
    async eaOutdoorProjectAllSelect(){//运营商选择列表
      let res = await eaOutdoorProjectAllSelect()
      this.roadsideList = res.data || []
    },
    async eaOperatSelect(){//运营商选择列表
      let res = await eaOperatSelect({platformType:this.plateform.value})
      this.operatorList = res.data
    },
    tabClick(e){//平台切换
      this.plateform = {...e}
      this.queryParams.pageNum = 1
      this.getList()
    },
    platChange(e){//平台下拉改变
      console.log(e)
      let form = {...this.form}
      if(e == 2) {
        form.bikeFeeRuleId = ''
      }else{
        form.carDcFeeRuleId = ''
        form.carAcFeeRuleId = ''

      }
      this.form = {...form}
    },
    async eaFeeRuleAllSelect(){//获取收费规则
      let res = await eaFeeRuleAllSelect({platformType:this.plateform.value})
      let list = res.data || []
      this.ruleList = list
    },
    amapSelect(){//地图打开
    	this.$refs.mapLogs.mapLoad(this.form)
    },
    //地图选择保存
    mapSubmit(form){
      this.form = {...form}
    },
    getList() {
      this.loading = true;
      let queryParams = {...this.queryParams}
      if(!this.dateRange) this.dateRange = []
      if(this.dateRange.length) {
        queryParams.startTime = this.dateRange[0]
        queryParams.endTime = this.dateRange[1]
      }
      queryParams.platformType = this.plateform.value
      queryParams['operat_id'] = this.$store.state.expires_in ? this.$store.state.expires_in : 0
      api.listStation(queryParams).then(async resp => {
        console.log('this.tagOptions',this.tagOptions)
          var rows = resp.rows || [];
          rows = rows.map(item => {
            let tagIds = item.tagIds || ''
            let tagArr = tagIds ? tagIds.split(',') : []
            let taglist = []
            tagArr.map(item1=>{
              let obj = this.tagOptions.find(item2=>item2.id == item1)
              if(obj) {
                let obj1 = {
                  id:obj.id || '',
                  label:obj.label || '',
                }
                taglist.push(obj1)
              }
            })
            return {
              ...item,
              ac:[
                {name: '空闲充电口 ' + item['acPortFreeCount'], value: item['acPortFreeCount']},
                {name: '使用充电口 ' + item['acPortUseCount'], value: item['acPortUseCount']},
                {name: '异常充电口 ' + item['acPortFaultCount'], value: item['acPortFaultCount']},
              ],
              dc:[
                {name: '空闲充电口 ' + item['dcPortFreeCount'], value: item['dcPortFreeCount']},
                {name: '使用充电口 ' + item['dcPortUseCount'], value: item['dcPortUseCount']},
                {name: '异常充电口 ' + item['dcPortFaultCount'], value: item['dcPortFaultCount']},
              ],
              taglist,
            }
          });
          this.list = rows;
          this.total = resp.total;

          this.loading = false;
      });
    },
    handleQuery() {/** 搜索按钮操作 */
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {/** 重置按钮操作 */
      this.dateRange = [];
      this.location = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.resetForm("queryRef");
      this.handleQuery();
    },
    handleDelete(row) {
        this.$modal.msgSuccess("删除成功(没有接口)");
        // proxy.$modal.confirm('是否确认删除编号为"' + del_ids + '"的数据项?').then(function () {
        //     return delRole(del_ids);
        // }).then(() => {
        //     getList();
        //     proxy.$modal.msgSuccess("删除成功");
        // }).catch(() => {
        // });
    },
    handleExport() {/** 导出按钮操作 */
      this.download(api.EXPORT_URL, {
          ...this.queryParams
      }, `recharge_${new Date().getTime()}.xlsx`);
    },
    reset() {
      this.activeName = 'first';
      this.resetForm('formRef');
      this.form = {
        busineHours:[],
        isIndoor: 0,
        isMergeOutdoorPayment:0,
      };
    },
    converTime(time) {
    	const date = new Date();
    	const year = date.getFullYear();
    	const month = date.getMonth() + 1;
    	const day = date.getDate();
    	const hour = time.split(':')[0];
    	const minutes = time.split(':')[1];
    	const miao = time.split(':')[2];
    	return new Date(year, month, day, hour, minutes, miao);
    },
    handleAdd() {/** 添加 */
      this.reset();
      this.open = true;
      this.title = "添加";
      this.form = {
          balance_charging: 1,
          timely_charging: 1,
          CountryCode: 'cn',
          isDelay: 0,
          isParkingfee: 0,
          isVip: 1,
          isOpen: 1,
          StationType: 1,
          Construction: 2,
          SupplyType: 1,
          platformType:this.plateform.value,
          isIndoor: 0,
          isMergeOutdoorPayment:0,
      };
      this.getAllTag();
      this.initLocationOptions(0,1);
      this.eaFeeRuleAllSelect()
      this.eaOperatSelect()
      this.eaOutdoorProjectAllSelect()
    },
    handleUpdate(row) {
      // const loadingInstance = ElLoading.service({ fullscreen: false })
      this.open = true;
      this.edit_form_loading = true

      console.log(row)
      this.reset();
      const id = row.id;
      api.getStation(id).then(response => {
          // loadingInstance.close()
          this.edit_form_loading = false

          console.log('getStation', response)
          let data = response.data || {};
          let tagIds = data.tagIds || ''
          let tagIdsList = tagIds.split(',') || []
          let ProjectIds = data.mergeOutdoorPaymentProjectIds || ''
          let mergeOutdoorPaymentProjectIds = ProjectIds ? ProjectIds.split(',') : []
          this.form = {
            ...data,
            tagIds:tagIdsList.map(item=>Number(item)),
            isIndoor: data.isIndoor || 0,
            isMergeOutdoorPayment:data.isMergeOutdoorPayment || 0,
            mergeOutdoorPaymentProjectIds: mergeOutdoorPaymentProjectIds.map(item=>Number(item)),
          }

          this.form['busineHours'] = this.form['businessHoursStart'] ? [
            this.form['businessHoursStart'],this.form['businessHoursEnd']
          ] : []
          console.log('this.form',this.form)
          this.title = "修改";
          this.getAllTag();
          this.initLocationOptions(0,1);
          if(this.form.provinceCode) this.initLocationOptions(this.form.provinceCode,2);
          if(this.form.cityCode) this.initLocationOptions(this.form.cityCode,3);
          this.eaFeeRuleAllSelect()
          this.eaOperatSelect()
          this.eaOutdoorProjectAllSelect()
      });
    },
    onBusineHoursChange(val) {
      console.log('onBusineHoursChange', val)
      this.form['busineHours'] = val
    },
    submitForm() {/** 提交按钮 */
      console.log('submitForm', this.form.busineHours)
      this.$refs["formRef"].validate(valid => {
          if (valid) {
              let newForm = {...this.form}
              console.log('busineHours',this.form['busineHours'])
              newForm['businessHoursStart'] = this.form['busineHours'][0]
              newForm['businessHoursEnd'] = this.form['busineHours'][1]
              newForm['tagIds'] = this.form['tagIds'].toString()
              let proviceobj = this.proviceList.find(item=> item.areaCode == this.form.provinceCode) || {}

              console.log('proviceobj',proviceobj)
              newForm['provinceName'] = proviceobj.name
              let cityobj = this.cityList.find(item=>item.areaCode == this.form.cityCode) || {}
              newForm['cityName'] = cityobj.name
              let countyobj = this.countyList.find(item=>item.areaCode == this.form.countyCode) || {}
              newForm['countyName'] = countyobj.name
              // delete newForm['busineHours']
              if(this.form.isMergeOutdoorPayment == 1) {
                newForm.mergeOutdoorPaymentProjectIds = this.form.mergeOutdoorPaymentProjectIds.toString()
              }else{
                delete newForm.mergeOutdoorPaymentProjectIds
              }

              if (this.form.id != undefined) {
                  if(this.userInfo.operatorId) delete newForm.operatorId
                  api.updateStation(newForm).then(response => {
                      this.$modal.msgSuccess("修改成功");
                      this.open = false;
                      this.getList();
                  });
              } else {
                  api.addStation(newForm).then(response => {
                      this.$modal.msgSuccess("新增成功");
                      this.open = false;
                      this.getList();
                  });
              }
          }
      });
    },
    cancel() {/** 取消按钮 */
      this.open = false;
      this.reset();
    },
    proviceChange(e){// 省份下拉改变
      let form = {...this.form}
    	form.cityCode = ''
    	form.countyCode = ''
      this.form = {...form}
      this.cityList = []
      this.countyList = []
    	this.initLocationOptions(e,2)
    },
    cityChange(e) {// 城市下拉改变
      let form = {...this.form}
      form.countyCode = ''
      this.form = {...form}
      this.countyList = []
    	this.initLocationOptions(e,3)
    },
    initLocationOptions(code,type) {// 初始化位置选项
      api.listByPCode(code).then(resp => {
        if(type == 1) this.proviceList = resp.data || []
        if(type == 2) this.cityList = resp.data || []
        if(type == 3) this.countyList = resp.data || []
      })
    },
    handleQueryLocationChange(value) {// 选择位置
      this.locationArray2Object(this.queryParams, value)
    },
    handleFormLocationChange(value) {// 选择位置
      this.locationArray2Object(this.form, value)
    },
    handleShowDeviceMonitor(row) {
      // const loadingInstance = ElLoading.service({ fullscreen: false })
      this.device_monitor_open = true
      this.device_monitor_loading = true

      console.log('handleShowDeviceMonitor', row)
      const id = row.id;
      console.log(id)
      api.getEquip(id).then(resp => {
          console.log(resp)

          this.device_monitor_loading = false

          this.device_list = resp.list
      });
    },
    handleShowOrderList(type, row) {
      console.log('handleShowOrderList', row)
      console.log('handleShowOrderList', row.id)
      if (type == 1) { // 充电站订单
          this.order_by_stationname = row.stationName
          this.order_by_gun_id = row.id
      } else if (type == 2) {  // 设备订单
          const device_id = row
          this.order_by_stationname = ''
          this.order_by_gun_id = row.id
      }
      // proxy.$modal.msgError("没有接口");

      this.order_dialog_visible = true
      this.$nextTick(()=>{
        this.$refs.OrderList.tabClick(this.plateform)
      })
    },
    async getAllTag() {
      let resp =  await eaCarTagList()
    	this.tagOptions = resp.data || []
    },
    handleUploadSuccess(value) {
      console.log('handleUploadSuccess', value)
      this.form['pictures'] = value;
    },
    appendScript() {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      document.body.appendChild(script)
    },
    initMap() {
      var map = new window.qq.maps.Map(document.getElementById("container"),{
          center: new window.qq.maps.LatLng(39.916527,116.397128),
          zoom: 13
      });
      //添加监听事件
      window.qq.maps.event.addListener(map, 'click', function() {
          alert('您点击了地图.', map);
      });
    },
    handleShowMap() {
      this.open_map = true;
    },
    getBillingRules() {
      const params = {status: 1}
      params['operat_id'] = this.$store.state.expires_in ? this.$store.state.expires_in : 0
      listRule(params).then(resp => {
        this.billingRuleOptions = resp.rows
      });
    },
    handlePickLocation() {
      this.open_map = false;
      console.log('clickLatLng',this.clickLatLng)
      // form.value =
    },
  },

}
</script>
<style lang="scss">
    .el-tabs{
        .el-tabs__content {
            padding: 20px 0 0 0;
        }
    }

    .el-form-item {
        .el-form-item__content {
            flex: unset;
        }
    }
    .w100.el-form-item {
        .el-form-item__content {
            flex: 1;
        }
    }

    .device_monitor {
        .el-card__body {
            //padding: 15px 20px 20px 20px !important;
            //background-color: #CCC;
            //
            //.conn {
            //    background-color: #FFF;
            //}
        }
    }
</style>
